<#include "layout/template.ftl"/>
<@htmlHead title="抽奖活动列表">
<#-- page specific plugin styles -->
<#-- page specific plugin styles -->
<link rel="stylesheet" href="${resources}/assets/css/jquery-ui.css" />
<!-- <link rel="stylesheet" href="${resources}/assets/css/datepicker.css" /> -->
<link type="text/css" rel="stylesheet" href="${resources}/plugins/jedate/skin/jedate.css"> 
<link rel="stylesheet" href="${resources}/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="${resources}/plugins/jqgrid/4.6/jqgrid.extend.css" />
<style>
#grid-table td{
	text-align:center;
	
}
</style>
</@htmlHead>
<@htmlBody 'lottery' 'lotteryRecordManage'>
   <#-- start 头部显示当前位置 -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '抽奖活动管理' '抽奖活动列表'></@breadcrumbs>
   <#-- end 头部显示当前位置 -->
   <#-- start 主体部分 -->
   	<div class="page-content">
   		<#-- start 查询条件及标题-->
		<div class="page-header">
  			<#-- start 标题 -->
			<h1>
				<i class="fa fa-trophy"></i>&nbsp;活动列表
			</h1>
			<#-- end 标题 -->
			<#--start 操作 -->
			<div style="margin-top:20px;padding:10px 0px 0px 0px;border-top:1px solid #307ecc">
				<#-- 按钮 -->
				<div style="float:right">
					<button id="find_btn"  class="btn btn-sm btn-primary">
						<i class="ace-icon fa fa-search"></i>查 询
					</button>
					<a href="${path}/manage/lottery/record/export" id="find_btn"  class="btn btn-sm btn-primary">
						<i class="glyphicon glyphicon-plus"></i>导出
					</a>
				</div>
				<#-- start 查询条件 -->
				<div id="query" class="query-view" style="">
					<ul class="list-inline">
						<li>
						<label>活动名称:</label><input type="text" class="input-sm" id="name" name="lotteryactivity.name" data-op="cn" /> 
						</li>
						<li>
						<label>中奖时间:</label><input type="text" readonly="readonly" class="input-sm" id="startTime" name="createTime" data-op="ge" /> 
						~<input type="text" readonly="readonly" class="input-sm" id="endTime" name="createTime" data-op="le" /> 
						</li>
						<li>
						<label>状态:</label>
							<select name="status" data-op="eq">
								<option value="">请选择状态</option>
								<option value="1">未中奖</option>
								<option value="2">中奖</option>
								<option value="3">已发奖</option>
							</select>
						</li>
					</ul>
				</div>
				<#-- end 查询条件 -->
			</div>
			<#-- end  操作 -->
		</div>
		<#--end 查询条件及标题  -->
		<#-- start  数据列表 -->
		<div class="row">	
			<div class="col-md-12">	
			  	<table id="grid-table"></table>
		 		<div id="grid-pager"></div>
			</div>
		</div>	
		<#-- end 数据列表 -->
	</div>
   <#-- end 主体部分 -->
   
</@htmlBody>

<@htmlBodyScript>
<#-- 格式化货币 -->
<script src="${resources}/plugins/tool/accounting.min.js"></script>
<script src="${resources}/assets/js/date-time/bootstrap-datepicker.js"></script>
<script src="${resources}/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
<script src="${resources}/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>
<#-- 日期控件-->
<!-- 	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.js"></script>
  	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
 -->
 <script>
/* 	$("#startTime,#endTime").datetimepicker({
		bootcssVer:3,
	    format: "yyyy-mm-dd",
	    language:"zh-CN",
		weekStart: 1,
       	todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
	}); */
</script>
<script type="text/javascript">
	var grid_selector = "#grid-table";
	var pager_selector = "#grid-pager";
	var path='${path}';
$(function(){
	//格式化时间
	function formatDatetime(cellValue, options, rowObject) {
		var output = moment(cellValue).format('YYYY-MM-DD  hh:mm:ss');
		return output;
	}
	//状态
	function formatStatus(cellValue, options, rowObject){
		if(cellValue==1){
			options="<span>未中奖</span>"
		}else if(cellValue==2){
			options="<span>中奖</span>"
		}else{
			options="<span>已发奖</span>"
		}
			return options;
	}
	//次数
	function formattype(cellValue, options, rowObject){
		if(cellValue==1){
			options="<span>大转盘</span>"
		}else{
			options="<span>摇一摇</span>"
		}
		return options;
	}
	
	//分页插件开始
	$("#grid-table").jqGrid({
		url:'${path}/manage/lottery/record/list',
		mtype : "post", 
		datatype: "json",
		altRows:true,
		colNames:[ 'ID','活动名称','中奖奖品','手机号','中奖用户','中奖时间'],
	 	colModel: [
			{name:'id', width:40},
			{name:'lotteryactivity.name', width:50},
			{
				name:'prize.name', 
				width:50,
				formatter:function(cellValue, options, rowObject){
					if(cellValue==''|| cellValue==null){
						return "谢谢参与";
					}
					return cellValue;
				}
			},
			{name:'member.username', width:50},
			{name:'member.nickname', width:50},
			{name:'createTime', width:50,formatter:formatDatetime}
	 	],
	 	viewrecords: true, 							// 在toolbar显示的当前页数,步长,总数
		autowidth: true,								//自动宽度
		height: "450",
		rowNum: 10,
		rowList:[10,50,100],
		sortname: 'id',
		sortorder: 'desc',
		pager: "#grid-pager",
		caption: "列表",
		loadComplete : function() {
			var table = this;
			setTimeout(function(){
				styleCheckbox(table);
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0);
		}
	});
	//自定义查询开始
	$("#find_btn").click(function(){ 
		searchData('${path}/manage/lottery/record/list')
    });
});
</script>
  <script type="text/javascript" src="${resources}/plugins/jedate/jedate.js"></script> 
	<script>
		var start = {
		    dateCell: '#startTime',
		    format: 'YYYY-MM-DD',
		   // minDate: jeDate.now(0), //设定最小日期为当前日期
		    festival:true,
		    ishmsVal:false,
		    maxDate: '2099-06-30 23:59:59', //最大日期
		    choosefun: function(elem,datas){
        	end.minDate = datas; //开始日选好后，重置结束日的最小日期
    		}
		};
		var end = {
		    dateCell: '#endTime',
		    format: 'YYYY-MM-DD',
		   // minDate: jeDate.now(0), //设定最小日期为当前日期
		    festival:true,
		    maxDate: '2099-06-16 23:59:59', //最大日期
		    choosefun: function(elem,datas){
		        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
		    }
		};
		jeDate(start);
		jeDate(end);
	</script>
<script src="${resources}/assets/js/jqGrid/jquery.jqGrid.Extract.js"></script>
</@htmlBodyScript>